<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <ul>
        <!--      渲染数组  :key最好赋值一个唯一的标识 -->
        <h1>渲染数组</h1>
        <li v-for="(p,index) in persons" :key="p.id">
            <!--        第二个变量是索引-->
            {{p.name}}-{{p.age}}-{{index}}
        </li>
        <h1>渲染对象</h1>
        <!--      这里的in也可以用of来代替 一样的效果 第一个参数是value 第二个参数是key-->
        <li v-for="(value,key) of car" :key="key">
            <!--        第二个变量是索引-->
            {{key}}-{{value}}
        </li>
        <h1>渲染字符串</h1>
        <!--      这里的in也可以用of来代替 一样的效果 第一个参数是value 第二个参数是索引-->
        <li v-for="(value,index) of str" :key="index">
            <!--        第二个变量是索引-->
            {{index}}-{{value}}
        </li>
        <h1>遍历次数</h1>
        <!--      这里的in也可以用of来代替 一样的效果 第一个参数是value 从1开始 第二个参数是索引 从0开始-->
        <li v-for="(value,index) of 5" :key="index">
            <!--        第二个变量是索引-->
            {{index}}-{{value}}
        </li>
    </ul>
</div>
<script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;
    new Vue({
        el: '#root',
        data: {
            persons: [
                {id: '001', name: '张三', age: 18},
                {id: '002', name: '李四', age: 19},
                {id: '003', name: '王五', age: 20}
            ],
            car: {
                name: '迈巴赫s680',
                price: '几百万',
                color: '白色'
            },
            str: 'hello'
        }
    });
</script>
</body>
</html>